// 快捷键 imrc
import React, { Component } from 'react'
import { Text, View } from 'react-native';

type PropType = any

type StateType = any


// 快捷键 ccc
class ClassView extends Component<PropType , StateType> {

  /* 
  类组件的执行顺序
  constructor
  render
  componentDidMount

  先执行构造函数 -> 第一次渲染页面  -> 执行componentDidMount -> componentWillUnmount
  */


  // 构造函数 最先执行
  constructor(props:any) {
    super(props);

    const {name  ,age  ,show} = props

    this.state  = {
      address:'this is address'
    };
    console.log('constructor' ,name  ,age  ,show  );
    
  }

  // 组件加载成功
  componentDidMount(): void {
    console.log('componentDidMount');

    // 修改state中的变量
    setTimeout(() => {
      this.setState({
        address:'change address'
      })
    }, 2000);
  }

  // 组件即将卸载
  componentWillUnmount(): void {
    console.log('componentWillUnmount');
    
  }


  render() {
    console.log('render');
    const { address } = this.state
    return (
      <View style={{width:'100%' , height:200 , backgroundColor:'pink' , paddingLeft:20}}>
        <Text style={{fontSize:24 , color:'#fff'}} >
          {/* 调用时 用this */}
          {this.props.name}
        </Text>
        <Text style={{fontSize:24 , color:'#000'}} >
          {address}
        </Text>
      </View>
    );
  }
}



export default ClassView;